import React, { useState } from 'react';
import {useLoaderData, Outlet, Link, useNavigate} from 'react-router-dom';
import './App.css';
import './index.less';
import AppContext from './context';
// import Test from './components/fnCom/test';
import ClassGrandParent from './components/classCom/grandParent';
import FnGrandParent from './components/fnCom/grandParent';
import ThemeAwareComponent from './components/otherCom/themeAwareComponent';
import DemoUseReducer1 from './components/Demo/demoUseReducer/demo1/index';
import DemoUseReducer2 from './components/Demo/demoUseReducer/demo2/index';
import DemoUseReducer3 from './components/Demo/demoUseReducer/demo3/index';
import DemoUseReducer4 from './components/Demo/demoUseReducer/demo4/index';

import DemoUseMemo1 from './components/Demo/demoUseMemo/demo1/index';
import DemoUseMemo2 from './components/Demo/demoUseMemo/demo2/index';
import DemoUseMemo3 from './components/Demo/demoUseMemo/demo3/index';

import DemoUseEffect1 from './components/Demo/demoUseEffect/demo1/index';
import DemoUseEffect2 from './components/Demo/demoUseEffect/demo2/index';
import DemoUseEffect3 from './components/Demo/demoUseEffect/demo3/index';

import DemoUseCustomHook1 from './components/Demo/demoUseCustomHook/demo1/index';
import DemoUseCustomHook2 from './components/Demo/demoUseCustomHook/demo2/index';

import DemoUseSuspence1 from './components/Demo/demoUseSuspence/demo1/index';

const value = {name: 'AppContext--value-name'};
function App() {
    const [appStore, setAppStore] = useState(value);
    const res = useLoaderData();
    const navigate = useNavigate();
    const goShopPage  = () => {
        navigate('/shop', {state: {name: 'yezhen'}})
    };
    return (
        // Provider组件接受value属性，此处传入一个带有name属性的对象
        <AppContext.Provider value={appStore}>
            {/* 被包裹的组件作为消费者==consumer */}
            <div className="App">
                {/* <button onClick={() => {setAppStore({name: 'AppContext--value-name-appChanged'})}}>App修改AppContext中的name</button> */}
                {/* <FnGrandParent setAppStore={setAppStore}/> */}
                {/* <ClassGrandParent/> */}
                {/* <ThemeAwareComponent/> */}
                {/* <DemoUseReducer1/> */}
                {/* <DemoUseReducer2/> */}
                {/* <DemoUseReducer3/> */}
                {/* <DemoUseReducer4/> */}
                {/* <DemoUseMemo1/> */}
                {/* <DemoUseMemo2/> */}
                {/* <DemoUseMemo3/> */}
                {/* <DemoUseEffect1/> */}
                {/* <DemoUseEffect2/> */}
                {/* <DemoUseEffect3/> */}
                {/* <DemoUseCustomHook1/> */}
                {/* <DemoUseCustomHook2/> */}
                {/* <DemoUseSuspence1/> */}
                this is app:
                <span>{res}</span>
                <div className='linkBtn'>
                    <Link to="/test/1">ONE</Link>
                    &nbsp;
                    <Link to="/test/2">TWO</Link>
                </div>
                <div onClick={goShopPage}>点击去往shopPage</div>
                <div className='home'>
                    <Outlet />
                </div>
            </div>
        </AppContext.Provider>
    )
}

const fetchApp = () => {
    console.log('loadApp......');
    return 'resOfLoadApp-result';
}
export {
    App,
    fetchApp,
}
